<template>
  <div style="display: flex">
    <div style="margin-right: 20px">
      <el-date-picker
        v-model="startDate"
        type="date"
        :placeholder="startPlaceholder"
        :disabled-date="startDisabledDate"
        v-bind="$attrs.startOptions"
      >
      </el-date-picker>
    </div>
    <div>
      <el-date-picker
        v-model="endDate"
        type="date"
        :placeholder="endPlaceholder"
        :disabled="endDateDisabled"
        :disabled-date="endDisabledDate"
        v-bind="$attrs.startOptions"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, watch } from 'vue'
  const emits = defineEmits(['startChange', 'endChange'])
  const ONEDAYTIME = 1000 * 60 * 60 * 24//一天
  let props = defineProps({
    startPlaceholder: {
      type: String,
      default: '请选择开始日期'
    },
    endPlaceholder: {
      type: String,
      default: '请选择结束日期'
    },
    // 是否禁用选择今天之前的日期
    disableToday: {
      type: Boolean,
      default: true
    }
  })
  let startDate = ref<Date | null>(null)
  let endDate = ref<Date | null>(null)
  let endDateDisabled = ref<Boolean>(true)
  // 禁用开始日期的函数
  let startDisabledDate = (time: Date) => {
    // 小于今天（不包含今天）
    if (props.disableToday) return time.getTime() < Date.now() - ONEDAYTIME
  } 

  let endDisabledDate = (time: Date) => {
    if (startDate.value) {
      return time.getTime() < startDate.value.getTime() + ONEDAYTIME
    }
  }
  watch(
    () => startDate.value,
    (val) => {
      if (!val) {
        endDateDisabled.value = true
        endDate.value = null
      } else {
        emits('startChange', val)
        endDateDisabled.value = false
      }
    }
  )

  watch(
    () => endDate.value,
    (val) => {
      if (val) {
        emits('endChange', {
          startDate: startDate.value,
          endDate: val
        })
      }
    }
  )
</script>
<style lang="scss" scoped></style>
